<template>
    <el-dialog title="税率税码列表" :close-on-click-modal="false" append-to-body :close-on-press-escape="false" :visible.sync="visible" :before-close="closeModal">
        <div class="full-width" id="mul_select">
        <el-form :inline="true" size="small" :ref="search">
          <el-form-item label="分类名称/简称/关键字/说明：">
             <el-input size="small" placeholder="请输入分类名称/简称/关键字/说明" v-model.trim="search.name" maxlength="40" clearable></el-input>
          </el-form-item>
          <el-form-item label="分类编码/分类简码：">
             <el-input size="small" placeholder="请输入分类编码/分类简码" v-model.trim="search.number" maxlength="40" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" class="width_104" @click="getPageDataList()">查询</el-button>
            <el-button size="small" class="width_104" @click="resetOption()">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
        <el-table class="margin_top_20" ref="multipleTableRef" :data="pageData" stripe row-key="id" :header-cell-style="tableHeaderStyle" v-loading="loading"  @select="handleOneItem">
          <el-table-column type="selection" width="42" :reserve-selection="true" :selectable="checkSelectable" prop="index"></el-table-column>
          <!-- <el-table-column type="index" label="序号"></el-table-column> -->
          <el-table-column prop="title" label="分类名称"></el-table-column>
          <el-table-column prop="taxNumber" label="分类编码"></el-table-column>
          <el-table-column prop="taxNumber" label="分类简码"></el-table-column>
          <el-table-column prop="taxRate" label="税率">
            <template slot-scope="scope">
              <span>{{ Number(scope.row.taxRate) * 100 }}%</span>
            </template>
          </el-table-column>
          
          <el-table-column prop="abbreviation" label="简称"></el-table-column>
          <el-table-column prop="stated" label="说明">
          <template slot-scope="scope">
            <div class="text-ellipsis" :title="scope.row.stated">{{scope.row.stated}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="keywords" label="关键字" >
          <template slot-scope="scope">
            <div class="text-ellipsis" :title="scope.row.keywords">{{scope.row.keywords}}</div>
          </template>
        </el-table-column>
        </el-table>
    <!-- 页面页脚 -->
    <el-row :gutter="10" class="text-center">
      <br/>
      <el-pagination background @size-change="handleSizeChange" @current-change="handlePagingChange" :current-page="pageIndex" :page-sizes="pageSizes" :page-size="pageSize" :layout="paginationLayout" :total="pageCount"> </el-pagination>
    </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeModal()">取 消</el-button>
        <el-button type="primary" @click="closeRateDialog()">确 定</el-button>
      </div>
    </el-dialog>
</template>  

<script>
import Setting from '@/settings';
import { GetFinicalDataList } from '@/views/store-management/services/index';
export default {
  props: ['visible','selectedList'],
  data() {
    return {
      paginationLayout: Setting.tablePaginationLayout,
      tableHeaderStyle: Setting.tableHeaderStyle,
      pageIndex: 1,
      pageSize: Setting.defaultTablePaginationSize,
      pageSizes: Setting.tablePaginationSizes,
      pageCount: 0,
      loading: false,
      pageData: [],
      loading: false,
      multipleSelection: [],
      search: {
        name: '',
        number: ''
      },
    }
  },
  watch: {
    visible: {
      immediate: true,
      handler(newValue) {
        if (!newValue) return;
        this.multipleSelection = this.selectedList
        this.getPageDataList();
      }
    }
  },
  methods: {
      checkSelectable(row, index) {
         if (this.multipleSelection[0]) {
        if (this.multipleSelection[0].id == row.id) {
          return 1
        }
        return 0
      } else {
        return 1
      }
    },
      handleOneItem(selection, row) {
        console.log(selection, row)
        // this.$refs.multipleTableRef.toggleRowSelection(row, true)
        // if (selection.includes(row)) {
          this.multipleSelection = selection
        // } 
        // else {
        //   this.checkedList[this.checkRadio - 1] = null;
        // }
    //   }
      // this.$set(this.multipleSelection);
    },
    getRowKeys(row) {
      return row.id // 每条数据的唯一识别值
    },
    closeRateDialog() {
        const newList = this.multipleSelection.map(item => {
        return item
      });
      this.$emit('selected', newList);
      this.closeModal();
    },
    closeModal() {
    //   this.search = ''
      // this.$refs.multipleTableRef.clearSelection();
      this.$emit('update:visible', false);
    },
    handelSet(arr) {
    for(var i = 0; i < arr.length; i++) {
      if(arr[i] === undefined) {
        arr.splice(i,1);
        i = i - 1; // i - 1 ,因为空元素在数组下标 2 位置，删除空之后，后面的元素要向前补位，                 // 这样才能真正去掉空元素,觉得这句可以删掉的连续为空试试，然后思考其中逻辑
        }
      }
      return arr
    },
    handleSelectionChange(selectlist) {
      let arr = selectlist
      this.multipleSelection = this.handelSet(arr);
    },
    getPageDataList() {
      this.loading = true
      GetFinicalDataList({
        pageSize: this.pageSize,
        pageNum: this.pageIndex,
        name: this.search.name,
        number: this.search.number
      })
        .then(data => {
          if (data.code == 200) {
            this.pageData = data.data.list
            this.pageCount = data.data.total
            if(this.multipleSelection && this.multipleSelection.length > 0) {
              this.$nextTick(() => {
                this.multipleSelection.forEach(item => {
                        const finder = this.pageData.find(page => page.id == item.id);
                         if(finder){
                            this.$refs.multipleTableRef.toggleRowSelection(finder, true);
                         }else{
                            this.$refs.multipleTableRef.toggleRowSelection(item, true);
                         }
                    });
                })
            }
            if ((!data.data.list || !data.data.list.length) && this.pageIndex > 1) {
              this.pageIndex = 1
              this.getPageDataList()
            }
          }
          setTimeout(() => {
            this.loading = false
          }, 300)
        })
        .catch(error => {
          this.loading = false
        })
    },
    // 重置操作
    resetOption() {
      this.search.name = ''
      this.search.number = ''
      this.pageIndex = 1
      this.getPageDataList()
    },
    handlePagingChange(event) {
      this.pageIndex = event
      this.getPageDataList()
    },
    handleSizeChange(event) {
      this.pageIndex = 1
      this.pageSize = event
      this.getPageDataList()
    },
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-table th > .cell:nth-child(1) .el-checkbox {
  display: none;
}
::v-deep .full-width .el-input {
  width: 250px !important;
}
</style>
    